<template>
  <div class="block">
    <el-carousel trigger="click" :height="height">
      <el-carousel-item v-for="item in imgListData" :key="item.id" v-show="imgListData.length > 0">
        <img src="@/assets/HomeAbout/home/banner1.jpg" style="width:100%;height:100%;" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang='ts'>
import { reactive, ref, defineComponent, watch } from 'vue'
import TypeSum from '@/TypeSum/entry'
type BannerData = TypeSum['Home']['BannerData']
export default defineComponent({
  name: 'Slideshow',
  props: ['imgListData', 'height']

})
</script>
<style scoped>
.swiper {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>